<template>
  <el-container class="notice-container">
    <!-- 左侧导航 -->
    <el-aside width="260px" class="notice-aside">
      <div class="notice-header">
        <h3 class="title">消息中心</h3>
        <el-button
            type="primary"
            size="small"
            @click="markAllAsRead"
            :disabled="totalUnread === 0"
        >
          全部标记已读
        </el-button>
      </div>

      <el-menu
          :default-active="selectIndex"
          class="notice-menu"
          @select="changeTitle"
      >
        <el-menu-item index="1">
          <el-icon><Bell /></el-icon>
          <span>系统通知</span>
          <el-badge
              :value="unreadCount.system"
              :max="99"
              v-show="unreadCount.system > 0"
              class="badge"
          />
        </el-menu-item>

        <el-menu-item index="2">
          <el-icon><Star /></el-icon>
          <span>收到的赞</span>
          <el-badge
              :value="unreadCount.like"
              :max="99"
              v-show="unreadCount.like > 0"
              class="badge"
          />
        </el-menu-item>

        <el-menu-item index="3">
            <el-icon><ChatLineRound /></el-icon>
            <span class="menu-text">回复我的</span>
            <el-badge
                :value="unreadCount.reply"
                :max="99"
                v-show="unreadCount.reply > 0"
                class="badge"
            />
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 右侧内容 -->
    <el-main class="notice-main">
      <div class="main-header">
        <h4 class="title">{{ noticeTitle }}</h4>
        <el-tag type="info" v-if="totalUnread > 0">
          未读消息：{{ totalUnread }}
        </el-tag>
      </div>

      <el-card shadow="never" class="notice-card">
        <template v-if="noticeList.length > 0">
          <div
              v-for="item in noticeList"
              :key="item.id"
              class="notice-item"
              :class="{ 'unread': item.read === 0 }"
              @click="handleClickNotice(item)"
          >
            <el-avatar :src="item.sendUser?item.sendUser.img:''" />
            <div class="content">
              <div class="meta">
                <span class="name">{{ item.sendUser?item.sendUser.nickName:'系统' }}</span>
                <el-tag
                    v-if="item.read === 0"
                    type="danger"
                    size="mini"
                    effect="plain"
                >
                  未读
                </el-tag>
                <span class="time">
                  {{ parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}') }}
                </span>
              </div>
              <div class="text">{{ item.text }}</div>
            </div>
          </div>
        </template>

        <el-empty v-else description="暂无通知" :image-size="160" />
      </el-card>
    </el-main>
  </el-container>
</template>
<script setup>
import {computed, inject, onMounted, ref} from "vue";
import {getNoticeListApi, getUnreadNoticeApi, readApi} from "@/api/noticeApi.js";
import {parseTime} from "@/tool/utils.js";

// 选择功能后展示数据
const selectIndex = ref('1')
const noticeTitle = ref('系统通知')
const noticeType = ref('system')

//通知列表
const noticeList = ref([{
  id: -2878,
  user_id: Number,
  text: String,
  read: Number,
  notice_type: String,
  create_time: String,
  sendUser: {img: String}
}])
//未读数
const unreadCount = ref({
  like: 0,
  reply: 0,
  system: 0,
})
//开局处理
onMounted(() => {
  initData()
})

function initData() {
  getUnreadNotice()
  getNoticeList(noticeType.value)
}

//获取未读通知数
async function getUnreadNotice() {
  await getUnreadNoticeApi().then(res => {
    unreadCount.value = res.data
  })
}

//获取通知列表
async function getNoticeList(noticeType) {
  await getNoticeListApi(noticeType).then(res => {
    noticeList.value = res.data
    readApi(noticeType)
  })
}

//切换菜单方法
function changeTitle(index) {
  selectIndex.value = index
  switch (index) {
    case '1':
      noticeTitle.value = '系统通知'
      noticeType.value = 'system'
      break
    case '2':
      noticeTitle.value = '收到的赞'
      noticeType.value = 'like'
      break
    case '3':
      noticeTitle.value = '回复我的'
      noticeType.value = 'reply'
  }
  getNoticeList(noticeType.value)
}


// 功能方法

//图片路径补全
function getFullImgUrl(imgPath) {
  return inject('baseUrl') + imgPath;
}


// 计算总未读数
const totalUnread = computed(() => {
  return Object.values(unreadCount.value).reduce((a, b) => a + b, 0)
})

// 标记全部已读
const markAllAsRead = async () => {
   unreadCount.value = {
    like: 0,
    reply: 0,
    system: 0,
  }
  // 实现标记逻辑
}

// 点击通知项
const handleClickNotice = (item) => {
  if (item.read === 0) {
    // 标记为已读逻辑
  }
  // 其他点击处理
}
</script>

<style scoped>
.notice-container {
  height: calc(100vh - 72px);
  background: #f5f7fa;
}

.notice-aside {
  background: #fff;
  border-right: 1px solid #ebeef5;
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

.title {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.notice-menu {
  border-right: none;
  padding: 8px 0;
}

.notice-menu .el-menu-item {
  height: 56px;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.notice-menu .el-icon {
  margin-right: 12px;
  font-size: 18px;
}


.badge {
  margin:0 0 35px 10px;
}

.notice-main {
  padding: 20px;
}

.main-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.notice-card {
  min-height: 600px;
  border-radius: 8px;
}

.notice-item {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  margin: 8px 0;
  border-radius: 6px;
  transition: all 0.3s;
  cursor: pointer;
  background: #fff;
}

.notice-item:hover {
  background-color: #f8f9fa;
}

.notice-item.unread {
  background: #f6faff;
}

.content {
  flex: 1;
  margin-left: 16px;
}

.meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.name {
  font-weight: 500;
  color: #303133;
}

.time {
  color: #909399;
  font-size: 12px;
}

.text {
  color: #606266;
  line-height: 1.6;
}
</style>
